<?php echo $this->render('/public/header'); ?>
<?php use yii\widgets\LinkPager; ?>
<script src="https://cdn.bootcss.com/element-ui/1.4.3/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/1.4.3/theme-default/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue-lazyload/1.1.4/vue-lazyload.js"></script>
<script src="/statics/public/postbird-img-glass.js"></script>
<div id="main" class="col-lg-12" v-cloak>
    <div class="col-lg-12 col-md-12 col-xs-12" style="margin-bottom:20px">
        <div class="form-inline">
            <div class="form-group">
                <el-input name="product" v-model="product" placeholder="搜索产品"></el-input>
            </div>
            <div class="form-group">
                <el-select  value-key filterable v-model="job_number">
                    <el-option v-for="s in staff" :key="s.job_number" :value="s.job_number" :label="s.name"></el-option>
                </el-select>
            </div>
            <div class="form-group">
                <el-date-picker
                        v-model="date"
                        type="date"
                        name="date"
                        @change="selectdate"
                        placeholder="select begin time"
                >
                </el-date-picker>
            </div>
            <div class="form-group">
                <el-date-picker
                        v-model="enddate"
                        type="date"
                        name="date"
                        @change="selectdate2"
                        placeholder="select end time"
                >
                </el-date-picker>
            </div>
            <div class="form-group">
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
            </div>
        </div>

    </div>

    <template v-for="(v,k) in list">
        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
            <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"
                 style="border-bottom: 3px solid grey;height: 30px;">
                <span class="label-success label">{{k}}</span>
            </div>
            <el-row  style="margin-top:30px" >
                <el-col :lg="3" :md="3"  :sm="6" :span="6" style="margin:30px 20px;height: 270px" v-for="v2 in v">
                    <el-card :body-style="{ padding: '0px' }" style="height:280px">
                        <img v-lazy="'<?php echo CDN; ?>'+v2.img_src" class="image" style="width:100%;height: 130px">
                        <div style="padding: 14px;">
                            <div class="bottom clearfix">
                                <p><strong>{{v2.product_name}}</strong></p>
                                <p>
                                    <template v-for="s in staff">
                                        <template v-if="s.job_number==v2.job_number">{{s.name}}</template>
                                    </template>
                                </p>
                                <p>${{v2['price']}}   {{v2['pcs']}}{{v2['unit']}}</p>
                                <br/>
                                <p>{{v2['description'].length > 30 ? v2['description'].slice(0,30) : v2['description']}}</p>
                                <p></p>
                                <a></a>
                                <el-button v-if="fiterFavor(v2.id)" type="success" round size="mini"
                                           @click="addFavor(1,v2['id'])">-取消收藏
                                </el-button>

                                <el-button v-else type="danger" round size="mini"
                                           @click="addFavor(2,v2['id'])">+加入收藏
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </template>

    <?php echo LinkPager::widget(['pagination' => $page]); ?>
</div>
<script>
    Vue.use(VueLazyload);
    var vm = new Vue({
        el: "#main",
        data:
            {
                date: "<?php echo yii::$app->request->get('date');?>",
                enddate: "<?php echo yii::$app->request->get('enddate');?>",
                product: "<?php echo yii::$app->request->get('product');?>",
                list:<?php echo json_encode($list);?>,
                favorList:<?php echo json_encode($favorList);?>,
                staff:<?php echo json_encode($staff);?>,
                job_number:'<?php echo yii::$app->request->get('job_number');?>'

            },
        methods:
            {
                addFavor: function (type, id) {
                    if (type == 1) {
                        $.post('/purchase/del-favor', {id: id}, () => {
                            let arr = [];
                            for (tmp in this.favorList) {
                                if (this.favorList[tmp].product_id != id) {
                                    arr.push(this.favorList[tmp]);
                                }
                            }
                            this.favorList = arr;
                        })
                    } else if (type == 2) {
                        $.post('/purchase/add-favor', {id: id}, (res) => {
                            if (res.code == 1) {
                                this.favorList.push({product_id:id});
                                this.$message.success('Collection success');
                            } else {
                                this.$message.error('Collection fail');
                            }
                        }, 'json')
                    }
                },

                fiterFavor: function (id) {
                    if (this.favorList.length <= 0) {
                        return false;
                    }
                    for (tmp in this.favorList) {
                        if (this.favorList[tmp].product_id == id) {
                            return true;
                        }
                    }
                    return false;
                },
                querySearchAsync: function (name, cb) {
                    var url = '/api/search_customer_by_like';
                    $.post(url, {name: name}, function (res) {
                        cb(res.data);
                    }, 'json')
                },

                handleSelect: function (item) {
                    this.customer_name = item.customer_name;
                    this.customer_num = item.number;
                },

                selectdate: function (v) {
                    this.date = v;
                },

                selectdate2: function (v) {
                    this.enddate = v;
                },

                search: function () {
                    if ((!this.job_number) && (!this.date) && (!this.product)) {
                        this.$message({
                            message: "没有任何搜索条件",
                            type: "error"
                        });
                        return false;
                    }
                    window.location.href = "/purchase/product_list?"
                        + "date=" + this.date
                        + "&enddate=" + this.enddate
                        + "&product=" + this.product
                        + "&job_number=" + this.job_number;

                }
            }

    });

    PostbirdImgGlass.init({
        domSelector: "img",
        animation: true,
        width: "500px",
        height: "500px",
    });
</script>
<?php echo $this->render('/public/footer'); ?>
